body {
    font-family: Arial, sans-serif;
    background-color: #f4c680;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  .container {
    max-width: 400px;
    height: 450px;
    padding: 20px;
    border: 6px solid #fdfdfd(0, 0, 0);
    background-color: rgb(255, 234, 167);
    border-radius: 10px;
    position: relative;
  }
  #changeThemeButton {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent; /* 使按钮背景透明 */
    border: none; /* 去除边框 */
    color: #000; /* 设置图标颜色，这里假设为黑色，你可以根据需要修改 */
    font-size: 20px; /* 设置图标大小 */
    cursor: pointer;
  }
  
  h1 {
    text-align: center;
  }
  
  input,
  select {
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 8px;
    background-color: #fdebd6;
  }
  
  button {
    padding: 8px 16px;
    background-color: #fcddaf;
    color:black;
    border: 1px solid white;
    cursor: pointer;
    border-radius: 8px;
  }
  
  #taskList {
    margin-top: 20px;
    color:black;
  }
  
  .task-list-container {
    max-width: 360px;
    max-height: 120px; /* 这里设置一个初始高度，大约能容纳两个任务项，可根据实际任务项高度调整 */
    overflow-y: auto; /* 允许垂直滚动 */
  }
  
  .task-item {
    background-color: rgb(251, 227, 166);
    padding: 10px;
    margin-bottom: 30px;
    border-radius: 5px;
  }
  
  .task-name {
    font-weight: bold;
  }
  
  .task-priority {
    color: #888;
  }
  
  .task-due-date {
    color: #555;
  }
  
  .completed {
    text-decoration: line-through;
  }
  
  .action-buttons {
    display: flex;
    gap: 5px;
  }
  
  #taskStatistics {
    margin-top: 10px;
    font-size: 14px; /* 缩小字号 */
    display: flex; /* 使用flex布局使子元素在一行显示 */
    justify-content: space-between; /* 均匀分布子元素 */
    align-items: center; /* 垂直居中对齐 */
    position: absolute; /* 添加绝对定位 */
      bottom: 10px; /* 距离容器底部0距离 */
      right: 20px;
      left: 20px;
  }
  
  /* 美化自定义选择器 */
  #customDateTimePicker {
    background-color: white;
    border: 1px solid gray;
    border-radius: 8px;
  }
  .year-select,
  .month-select,
  .day-select,
  .hour-select,
  .minute-select {
    padding: 5px;
    margin-bottom: 5px;
  }
  /* 分隔线样式 */
  #separator {
    width: 100%;
    height: 2px;
    background-color: white;
    margin-top: 50px; /* 调整横线与上面内容的间距，可根据实际情况修改 */
    margin-bottom: 5px; /* 调整横线与下面内容的间距，可根据实际情况修改 */
    display: block; 
  }
  
  #searchInput,
  #sortSelect {
    margin-top: 20px; /* 将搜索框和排序下拉按钮向下移动 */
  }